<template>
    <div>
      <el-row>
        <el-col :span="2" :offset="1">
          <el-button type="primary" plain @click="showUp()">添加分类</el-button>
        </el-col>
      </el-row>
      <hr>
      <shoptypelist :shoptypedata="shoptypedata"></shoptypelist>
      <!-- 弹窗-->
      <el-dialog title="商品分类编辑" :visible.sync="dialogFormVisible" :append-to-body="true">
        <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
        <el-form>
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="shoptype.shoptypename" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <!-- 设置触发更新的方法 -->
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    var _this;
    import shoptypelist from '../components/shoptype/shoptypeList.vue'
      export default {
        created (){
          _this=this;//记录this--【当前组件对象】
          _this.showAll();
        },
        components:{
        	shoptypelist
        },
        methods: {
          add(){
            var shoptypename=_this.$axios.post("/shoptype/checkname",{"shoptypename":this.shoptype.shoptypename});
            _this.$axios.all([shoptypename])
            .then(
              _this.$axios.spread(function(param){
                if(param.data=="error"){
                  alert("分类名不能重复");
                }
              })
              )

              _this.$axios.post(
                "/shoptype/insert",
                {
                  "shoptypename":this.shoptype.shoptypename,
                  "shoptypeid":this.shoptype.shoptypeid
                }
              )
              .then(function(param){
                _this.showAll();
              })
              .catch(function(err) {
              	console.log(err)
              });

            this.shoptype.shoptypename="",
            this.shoptype.shoptypid=""

            this.dialogFormVisible = false;

          },
          cancel() {
            this.shoptype.shoptypename="",
            this.shoptype.shoptypid=""
            // 取消的时候直接设置对话框不可见即可
            this.dialogFormVisible = false;
          },
          showUp() {
            //   设置点击按钮之后进行显示对话框
            this.dialogFormVisible = true;
          },
          showAll(){
          	//进入后台查--->axios
          	_this.$axios.post(
          	   "/shoptype/all",
          	   {}
          	)
          	.then(function(param){
          		console.log(param)
          		_this.shoptypedata=param.data
          	})
          	.catch(function(err){
          		console.log(err)
          	})
          }
        },
       data() {
             return {
              shoptypedata: [],
              dialogFormVisible: false,
              formLabelWidth: "100px",
              shoptype:{
                shoptypeid:"",
                shoptypename: ""
              }
          }
        }
      }
</script>
<style>
</style>
